<template>
	<view class="shopList">
		<view class="shopHeader">
			<view class="shopHeadertext active">默认</view>
			<view class="shopHeadertext">销量</view>
			<view class="shopHeadertext">价格</view>
			<view class="shopHeadertext">筛选</view>
		</view>
		<view class="shopMain" v-for="shopgoods in shopList" :key="shopgoods.gid" @click="todetail(shopgoods)">
			<image :src="shopgoods.photo"></image>
			<view class="Maindesc">
				<view class="desc1">{{shopgoods.subject}}</view>
				<view class="desc2">￥{{shopgoods.sale_price}}</view>
				<view class="desc3">{{shopgoods.comments}}{{shopgoods.sold}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapState({
				shopList:state=>state.cart.cartData
			})
		},
		methods:{
			todetail(shopgoods){
				wx.setStorageSync('shopdetail_key',shopgoods)
				wx.navigateTo({
					url:"../detail/detail"
				})
			}
		}
	}
</script>

<style lang="stylus">
	.shopList
		height 100%
		width 100%
		// background-color #007AFF
		.shopHeader
			width 100%
			height 80rpx
			display flex
			border-bottom 1rpx solid #cecece
			.shopHeadertext
				width 25%
				height 80rpx
				text-align center
				line-height 80rpx
				&.active
					color #1BFF0F
		.shopMain
			width 100%
			height 220rpx
			border 1prx solid #adadad
			display flex
			margin-top 20rpx
			border-bottom 1rpx solid #cecece
			image
				width 200rpx
				height 200rpx
				margin-left 20rpx
			.Maindesc
				width 520rpx
				margin-left 20rpx
				// background-color #00A200
				.desc1
					width 520rpx
					height 64rpx
					margin-bottom 50rpx
				.desc2
					width 520rpx
					height 44rpx
					color #ff0000
				.desc3
					width 520rpx
</style>
